<template>
  <div class="category-box">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 分类 -->
    <main>
      <van-tree-select
        :items="items"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        height="100%"
        @click-nav="clickNav"
      >
        <template #content>
          <ul class="brand-box">
            <li
              v-for="item in brands"
              :key="item.length"
              @click="goSearch(item.brand)"
            >
              <van-icon name="photo-o" />
              <article>
                {{ item.brand }}
              </article>
            </li>
          </ul>
        </template>
      </van-tree-select>
    </main>
    <!--底部 -->
    <footer-vue></footer-vue>
  </div>
</template>

<script>
import FooterVue from "@/components/FooterCom.vue";

export default {
  name: "CategoryPage",
  data() {
    return {
      active: 1,
      items: [],
      activeId: 1,
      activeIndex: 0,
      brands: [],
      category: "手机",
    };
  },
  components: {
    FooterVue,
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    clickNav(e) {
      this.category = this.items[e].text;
      this.getBrand(this.items[e].text).then((res) => {
        this.brands = res.data.data;
      });
    },
    getBrand(brand) {
      return this.$http({
        url: "pro/categorybrandlist",
        params: {
          category: brand,
        },
      });
    },
    goSearch(brand) {
      this.$router.push(
        `/categoryResult?category=${this.category}&brand=${brand}`
      );
    },
  },
  beforeCreate() {
    this.$http({
      url: "pro/categorylist",
    }).then((res) => {
      let msg = res.data.data;
      msg.forEach((item) => {
        this.items.push({
          text: item,
        });
      });
    });
  },
  created() {
    this.getBrand("手机").then((res) => {
      this.brands = res.data.data;
    });
  },
};
</script>

<style scoped>
.category-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  overflow: auto;
  padding: 0;
}
.van-tree-select {
  height: 100%;
  /* width: 3.75rem; */
}
.van-sidebar {
  width: 5rem;
  flex: none;
}
.van-sidebar-item {
  width: 5rem;
  height: 3.75rem;
  line-height: 32px;
}

/* 右侧内容样式 */
.brand-box {
  display: flex;
  flex-wrap: wrap;
}
.brand-box li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  font-size: 0.75rem;
  height: 4.5625rem;
  justify-content: center;
  padding: 0 0.375rem;
  border-right: 1px solid #f5f2f2;
  border-bottom: 1px solid #f5f2f2;
}
.brand-box li article {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  height: 0.875rem;
}
.brand-box li .van-icon {
  font-size: 1.75rem;
}
</style>